Building Essential Texture maps for Material Shaders using Photoshop tutorial

 

Basic - Building Essential Texture maps for Material Shaders using Photoshop

Author : K1chi - k1chi@hotmail.co.uk

 

Table of Contents

1. Introduction
   
   
   1. Tutorial Overview
      
      
   
   
   2. Requirements
      
      
   
   
   3. Reccomended Listening
      
      


2. Step One - Conceptualisation and Research
   
   
   1. What are Material Shaders?
      
      
   
   
   2. Research Overview
      
      
   
   
   3. Where to look
      
      


3. Step Two - Diffuse Map
   
   
   1. What is a Diffuse Map?
      
      
   
   
   2. General Approach
      
      
   
   
   3. Building our Diffuse Map
      
      
   
   
   4. Saving our Diffuse Map
      
      


4. Step Three - Normal Map
   
   
   1. What is a Normal Map?
      
      
   
   
   2. General Approach
      
      
   
   
   3. Building our Normal Map
      
      
   
   
   4. Saving our Normal Map
      
      
   
   
   5. Important things to consider
      
      


5. Step Four - Specular Map
   
   
   1. What is a Specular Map?
      
      
   
   
   2. General Approach
      
      
   
   
   3. Building our Specular Map
      
      
   
   
   4. Saving our Specular Map
      
      
   
   
   5. Important things to consider
      
      


6. Conclusion
   
   
   1. Tutorial Recap
      
      
   
   
   2. See Also
      
      
   
   
   3. Resources
      
      

---

Introduction

Tutorial Overview

In this tutorial we are going to cover the steps necassary for creating a very simple, but super awesome-o cool material shader. This tutorial does not tell you exactly how to get a material shader working in any specific game engine, however I have completed two other tutorials covering this subject:

 

• Basic Material Shaders for Id Tech 4 (Doom 3)
  
  


• Basic Material Shaders for UE3 (Gears of War) - coming soon
  
  

Please note (and I say this at the beginning of all tutorials) that there is never only ONE way of doing things, and my way is not necassarily the best for what you want to do. My advice is to use as many resources as possible which you then use those to develop YOUR way of doing things. This is your art so do whatever works best for you, because at the end of the day there is no right or wrong way when it comes to this stuff. Also I like to be quite thorough with my tutorials, so if you're looking for a quick and easy ‘step by step' solution with no babbling you may become quite frustrated with my style of writing, as I try to explain the logic for all my creative decisions as much as possible. However if you're looking for a comprehensive and detailed account of how I personally choose to do things, you've come to the right place.

---

Requirements

All you are going to need is a copy of Abode Photoshop and access to the Internet (which given you're reading this I think it's safe to say you have). The purpose of this tutorial is to show you how to create all the fundamental texture maps in Photoshop, so while there are alternatives to some of the methods and software used throughout (which will be explained in places), we'll not be using any here.

 

---

Reccomended Listening

Irrelevant? Yes, but I like to keep this stuff as informal and easy going as possible! During this tutorial I'm listening to:

 

Dalek - 'Abscense'.

Take some pounding, tight hiphip and noise-inspired soundscapes, put them into two giant, turbo-charged dumpster trucks and the hypnotic, chaos infused ambience which spews forth from the inevitable impact is as close as you'll come to an accurate comparisson.

 

Thankyou for your time, I hope you enjoy the tutorial and please forward any feedback to k1chi@hotmail.co.uk

 

---

Step One - Conceptualisation and Research

What are Material Shaders?

I guess the most simple way of explaining a Material Shader, would be to say that it is essentially a collection of textures which are combined to create a single Material. These textures effect the appearance of this Material in a variety of ways, such as how smooth it is or how shiny.

 

What are you doing right now? I imagine you are sitting at a desk, so take a look at an object on there or the desk itself. As you can see it's appearance is effected by a number of different attributes. Is it smooth or rough? Are there any major indentations? How reflective is it? The list goes on. Now in the early days gaming engines weren't capable of using multiple texture maps, so what artists would do is create just a single texture. While this served its purpose for a good number of years, the advances in technology such as dynamic lighting started to expose the cracks in this approach. For example, a single Textured Material might look stunning if there are no objects on it, and if light is effecting it from only a single direction. But if the light moves or new objects start inteacting with it, the Material needs to react accordingly to keep the sense of immersion and believability alive.

 

This single comparison screenshot between real-life reference, and ingame footage from Crytek's 'Crysis' alone illustrates just how much potential material shaders offer Game Artists and Designers. Screenshot from www.crysis-online.com.

Material Shaders have been around for years in the movie industry, but it hasn't been until recent years that Game Engines have been capable of integrating them while maintaining a steady framerate. I'll cover the exact purpose of each Texture Map as the Tutorial continues.

 

 

---

Research Overview

To quote some fella from the special features on the Disney/Pixar Finding Nemo DVD - "You can never do enough research", and the more art and design work I do the more I realise just how true this is. When I was at College/School I hated research, I just wanted to jump in and start building as soon as possible, but what you come to realise is your work has a far more believable, complete and detailed edge to it if you have a very thorough knowledge of how it would work in the ‘real world'.

 

This is pretty much a standard ‘first step’ in all aspects of design, so let’s see how it can be applied here. We’re building a texture so first things first: what kind of texture do we want to build? To answer this question you need to look at whatever your project you’re doing, as it’s setting and artistic style will fundamentally dictate the direction your work will take. Now here we’re just building a texture for the sake of building a texture so we’re quite free in what to go with. I’ve decided to go with the ‘derelict/urban’ look for this tutorial, as there’s an abundance of research opportunities and plenty of places to find material.

 

---

Where to look

So first things first, we need to find examples of such things in the ‘real world’. Where ever possible I like to get out and take my own photos for three reasons:

 

• It brings you into actual contact with whatever you're researching, allowing you see things or discover details you otherwise may not.
  
  


• It means you're using unique, original content
  
  


• Quite simply, it gets you outside. Whether you're doing this as a job or a hobby, if you take real pride in your work you're going to spend a lot of time infront of your computer, so any chance you get to spend some time away from it - TAKE IT!
  
  

For the purpose of this tutorial I’m going to stick to using the internet, which to be fair also comes with its benefits as it can offer you research material as it sometimes offers you research material otherwise beyond your means of discovery. Below are a few of the photo’s which I feel best express what I want to do with this material shader.

 

 

These were found at Flickr.com which came back as the number 1 google search result for ‘Urban Derelict’. As the aforementioned big fella says “You can never do enough research”, and 4 images from 1 web site really doesn’t even begin to scratch the surface. I dare say just spending so much as another 5 minutes looking at different web sites could bring back results and ideas which blow these out of the water, but what you also need to be conscious of is organisation and deadlines. In a professional environment you really can’t just spend weeks and weeks researching and getting no actual work done, it just doesn’t happen. Aside from that, too much information can lead to you becoming lost and the project losing direction, especially if you don’t maintain focus on exactly what you want to achieve. The perfect balance? That’s a very personal thing and only comes with experience. For me I like to keep a general idea of ‘feeling’ in my head rather than a specific look, so once I find a direction or style which best reflects that feeling I know I’m heading in the right direction. I know it’s time to stop researching when I can no longer find material which enhances, or quite simpley deviates from that feeling.

So we’ve done our research, we know what we want to create, now we can actually move on to building! Yipee!!!

 

 

---

Step Two - Diffuse Map

What is a Diffuse Map?

Colour. That is literally it. A Diffuse map defines the overall colour value of our Material. This is the most important Texture to our Material, and is a fundamental part of nailing a really cool Shader.

 

---

General Approach

The way you approach each Texture map is different, you have to not only bare in mind how it looks as an individual Texture, but also how it is going to interact with the other Texture maps when they all come together in the final shader.

 

For your Diffuse Map you need to think how your texture is going to look purely in terms of colour. That might sound obvious but there are a few things that can subconsiously effect your judgment, particularly when using photosourced material.

 

For example, shadows and subtle shading on a surface which appear as a result of a certain lighting condition or surface indentations should not be included in the Diffuse Map, as they are dynamic. Think of your Diffuse Map as being how a surface would in a perfectly lit room, giving you a simple straight-forward base colour.

 

---

Building our Diffuse Map

For the purpose of this Tutorial we are going to Photosource all our Textures. When building Textures there are three basic methods:

 

• Photosourcing
  • Using actual photographs of real textures


• Painting from Scratch
  • This probably isn't the official term so forgive my ignorant ass, but essentially its a case of literally painting the texture map from the ground up.


• Both
  • Quite literally a combination of the two, using both photosourced and custom painted assets.

Each come with their own pro's and con's, for this tutorial im going to stick with Photosourcing because it's generally alot faster.

 

So we need some material to work with. I (among a few million others) am a big fan of www.cgtextures.com as it holds a massive range of free to use, high quality textures. We're going to go with a wall texture, I really want to push the whole ‘decrepit' idea so we'll have some cracks and bricks showing, we'll get some major water leakage on there, perhaps even add some chipped paint. Below are the main textures I have picked to build the diffuse texture, which will be blended/chopped/combined to form the final piece. Please take note of their titles as I will be refering to them throughout this Tutorial.

 

 

I'm going to go mega hardcore with this texture and build it in 1024x1024 resolution. For a big project this may be larger than necessary depending on the texture's use and other assets which will be in the scene. However if needs be we can shrink and optimise our final image from this size, whereas on the otherside of things if we worked in 512x512 then realised we really needed it larger, we'd likely lose a lot of definition.

So open up a new file with a resolution of 1024x1024 and paste down your initial texture. You may need to do a little scaling to make sure it fits nicely like so :

 

 

---

One thing which I did notice about this image is that it's very dark and has a lot of detail already. This isn't always a bad thing, but since I want this texture to have more features it can be beneficial to have a more ‘plain' foundation, so I copied and pasted the base image, transform>rotate 180 degrees, and change the new layer to filter lighten with opacity 55%. I then flattened the image, and used the burn tool just to balance out the brightness a bit.

 

 

---

We're now going to take one of my other base textures dif_base03.jpg and paste that over the top, moving it into place so that the bricks sit nicely at the bottom of the image. Now the colour and general contrast of the two images is quite harsh, so on the layer holding the newly pasted image, we use Adjustments>Desaturate to suck the colour out of the new texture, and set its layer to multiply over the base image. With the top layer still selected, we then fully erase the top half of the image, but we need the transition to be a little more gentle/organic. Using the eraser tool, opacity 20% and a large soft brush, we start to erase more of the texture. Experiment with different brush sizes and opacity settings until you get a transition you are happy with, and you should end up with something like this:

 

---

Which is an acceptable start. Copy and paste Layer two (which has your slightly erased image), keeping it on multiply. Again the transition may be a little harsh, so just erase a few bits here and there to keep things smooth. Then select your background layer, and with a soft brush set to colour #838383 just paint over the very bottom of the image, so you're top two layers keep showing but the background texture completely runs out by the bottom of the image. Sticking with this layer, select your burn tool, opacity 50% with soft brush, and basically just use it on some of the cracks or indentations on the wall. What you're basically looking to achieve is a nice flow into the texture at the bottom.

 

 

---

The change is admitadely harsh but bare in mind that you'd usually spend a lot longer getting everything pixel perfect, I just want to run through the basics. However the main crack in the middle could do with some work, so we paste the original diff_base02.jpg over the top of the image again, desaturate and then use free transform to rotate the image so that the large crack seen at the top right falls in line with the crack on our base image. Set its layer to linear burn and using the eraser tool in a similar way as before (ie: changing opacity and brush size), take away most of the image so it only really effects the central crack. We can also this process with the sides of the image, just to balance it out a little.

---

Now things are starting to look suitably grim, but its not quite enough. So let's paste diff_base03.jpg into a new layer on top of our texture, then scale/position so that the pipes sit across the top. We Desaturate the image, but then edit > fade desaturate down to about 30%. Using the eraser tool, we make it so we only have the pipes at the top. Now it just looks as if they've been pasted on top, so we select our base layer, and use the burn tool set to midtones to basically darken the area beneath and around these pipes.

---

Again, not perfect, but with a little more time and effort you can see how it would work. Ok now let's bring in paste in diff_base04, making sure it is on the layer below our pipes. Desaturating it to about 80%, and setting its layer to overlay allows it to blend in a little better. In much the same fashion as we have been doing up to now, we again use the eraser tool at varying sizes and opacities to merge this layer into the rest of our texture.

---

As you can see our very grim texture is now making Bhopal look like the worlds favourite holiday destination by comparison.

To be honest we don't really want to do too much more with this, so save it in a layered format as a backup should you wish to come back to it, then flatten it down and save as a new file. To make things nice and sharp we duplicate our flattened image onto a new layer, and apply filter>high pass with a value of 3.0. This gives us a nasty greyish layer, so we change it to filter through vivid light with an opacity of 50%. Now the value I added to the high pass is quite high, possibly more than is suitable for your project, but I like nasty, harsh textures so for me its suitable. Always remember - do what works for you.

There's just one final step to take before this is done with. We want this texture to tile horiztonally, so it needs to be set up to do so properly when inside our game engine. Because we have such defined edges to our texture it doesn't really matter too much, but for the sake of this tutorial Ill go ahead with it.

There's a number of ways this can be done, but the way I choose (which allows me the best control I feel) is to copy and paste my base layer, flip it horizontally and then erase all but one side of the texture, so only a minor amount has been duplicated. Our result is a finished diffuse map :

---

Saving our Diffuse Map

Naming conventions can be of vital importance, not only to gaming engines but also to the organisation of your project.

How you organise and name your files can vary from engine to engine, but if like me you're creating a library of textures for future project use it pays to use consistant, logical naming conventions and organisational methods.

Try to use a logical folder setup for your textures. For example I use something along these lines:

• Textures
  • Walls
    • Concrete
    • Steel
    • Wood
  
  
  • Floors
    • Concrete
    • Steel
    • Wood

As you can see just from here it simplifies things alot. Always save your textures as .TGA format as this is read by most engines (atleast in terms of FPS), and I like to use a suffix to tell me what the texture map is. So in the case of the Diffuse Map I use _d (underscore 'd').

As I say do what's best for you, but whatever you go with keep it logical, simple and easy to navigate. As a final example I have saved this diffuse texture as

Textures > Walls > Concrete > crete01_d.tga

 

---

Step Three - Normal Map

What is a Normal Map?

No it's not the opposite of an abnormal map (seriously I am so dam funny). Normal Maps are used to give the appearance of indentations, subtle geometry and imperfections upon a surface which would be totally inpractical to build in actual 3D geometry. Particularly when used in Dynamic light settings they can produce fantastic results.

---

General Approach

Building an effective Normal Map can be a pain in the arse. A favoured way of doing things is to actually build the 3D geometry, then use an external application to generate the normal map for you. While this is very effective on Characters it's not always 'as' asuitable for flat surfaces, and since this Tutorial is dedicated to creating textures just in photoshop anyway, we won't be looking into this option.

When approaching your normal map you need to think purely in terms of height and depth "Is this part of my texture flat, or does it have small bumps/cracks?". Use your Diffuse Map not only to build the actual map but also as a reference, because some aspects of your Diffuse may be a certain colour as a direct result of surface imperfections.

---

Building our Normal Map

First thing's first, get onto Google and do a search for NVIDIA Normal Map Filter because unless you want to build your Normal Map by hand (here's a hint: you don't) you're going to need this.

When building Normal Maps in Photoshop I like to build in two parts

• Key Geometry
  • substantial shapes, things that really stand out against the rest of the surface


• Minor Details
  • Literally minor details, small imperfections

Let's load up the diffuse texture we just finished into a new photoshop file, and use image > adjustments > desaturate to make pure grayscale. We could just use the grayscale option but for the purpose of Normal Mapping we do need all three colour channels available.

---

A lot of the 3D information here is going to be purely detail, but there are some aspects we could really do with bringing out, such as the pipes at the top.

First of all we Create a new Layer, bucket fill black and change its opacity to around 60%. Now Using the pen tool with a light gray colour, we draw over the smaller of the two pipes. Then, using the layer blending properties on the layer holding our vector, we change the inner glow colour to #666666, and adjust the choke/size so that it fades in from the edges nicely. This is so that when it comes to creating the normal map, we don't just have a nasty flat shape.

---

We then repeat this process for the top pipe using a lighter value of grey for the overall colour, and for the cracks at the bottom using a darker value of grey (though for the cracks I didn't use an inner glow as it is quite an abrupt shape). What we have is a very simple, basic overview of depth in our image.

---

Okay sow now lets just flatten the image and open up the filter > Nvidiatools > normalmap. Now just how intense you want the normal map to be at this point can be determined by a number of things, such as the engine you're using or the required level of depth you want from your material, but I'll discuss this a little bit more at the end of the Tutorial. In this case I used scale 10 and made sure it was set to MAX (R,G,B,). This gives us the following result.

---

Normally you'd want to spend a little more time making sure all the shapes are perfect, but as I say this is just the jist of things. If you're working on a mod or major project you really need to spend time getting things as nice and accurate as possible.

Flatten and Save this file as something fresh. The Key geometry portion of the map is now done with and so then let's reopen our original Diffuse Map, once again Desaturating the Image ready for the Minor Details.

As we did earlier in the Tutorial, we need to Create a New layer, bucket fill it black and then move the opacity to something like 60%.

Let's Flatten the Image, now run the Normal Map Tool again and adjust to get a busier map.

---

As you can see there's alot more going on this time, but we don't really want it to be as strong as the Key Geometry portion. So let's copy this flattened image, open up the other 'Key geometry' normal map we just built and then paste this new one over the top. Change the layer filter to overlay,adjusting the opacity as desiredand the two should merge together quite nicely, giving us something like this

---

Saving our Normal Map

Remebering the logic employed when saving our Diffuse Map, we need to stick with a logical, organised folder structure and naming convention.

Since this is going to be used in the same Material Shader as the Diffuse Map we just created, we need to save it in the same folder, using the same file name but instead of using the _d suffix, we'll use _local which will help us identify this as our Normal Map.

So now we have two finished Texture Maps, they being as follows

Normal - Textures > Walls > Concrete > crete01_local.tga

Diffuse - Textures > Walls > Concrete > crete01_d.tga

---

Important things to Consider

Earlier I discussed how the required strength of your Normal Map can vary between game engines. Some engines will need a very strong Normal Map, some will need a very subtle one, and other's even let you manipulate it's strength from within the Material Shader. Overall you're going to have to build your Normal Map to conform to the standards set by your project, but just be aware of the fact that game engines may interpret your Textures differently, and you'll need to be able to work around these to really get the most out of your material.

The only other thing you may wish to bare in mind regarding Normal Maps are Displacement Maps and Height Maps.

Displacement Maps can be used by engines such as UE3 to actually make textures appear to be true 3D geometry (well, to some extent) whereas Height Maps can be added to enhance even finer details. The thing is if you're going to go with these you don't really want them to conflict with your Normal Map, and they may even render some aspects of it un-needed. For example, the finer details we added to our Normal Map in the second part of the Tutorial may not even be necassary if you've got a Height Map to do the job for you, likewise why bother with the Key Geometry aspects if Displacment Maps can do it even better?

Either way it's just stuff you want to bare in mind, and it can really pay off if you consider such things early on because you'll have to do less backtracking later on, and it also helps you develop a wider variety of skills and knowledge in Material Creation.

---

Step Four : Specular Map

What is a Specular Map?

A Specular Map is basically responsible for the Shinyness of a Material. Glossy or Shiny surfaces like say a Snooker Ball will have a stronger Specular Map than that of maybe, a piece of cardboard. Sorry I'm getting tired now and that's about as imaginative a comparison as I am willing to get :-D

---

General Approach

The Specular Map, perhaps more so than the Normal Map really requires you to think about the overall effect it may have on the Material and not just it's own values. Specular Maps can be any colour, but you need to remember that whichever colour you pick will in turn effect your Diffuse Map.

For example let's say you have a yellow Diffuse Map, but your Specular Map is a strong Red. When light comes into contact with the surface it is interacting with both maps, so you'll get more of an Orange colour as a result of the combination.

This can be very cool because you can use it to add subtle details to a Surface which aren't always clear because they're not in the Diffuse, and therefore require a certain lighting condition to really pull through.

With that in mind, let's move on to building the dam thing!

---

 

Building our Specular Map

As is the case with Normal Maps, Specular's can be interpreted differently by different game engines, but again this is something that can wait until after we've gone through the basic creation Process.

Let's open up our original Diffuse Map, then Duplicate base layer ontop of itself and set it to overlay. As you can see, brutal is definitely the right adjective.

---

Just to even things out a little let's Duplicate the original image again, desaturate it, then use the dodge tool set to midtones, on some of the really dark areas. Now we'll change this layer to linear dodge, opacity 35%, and erase any areas that were not completely black before hand. Again exactly how long you spend on this will come with experience and preference.

---

Remember how we added a layer over the top bucket-filled in completely black on our Normal Map? Do that again here. All we need to do now is change the opacity of this layer to decide just how strong we want our spec map to be. As mentioned before, exactly how strong this is depends on the game we're building for, for now I'm just going for a happy medium.

---

To be honest this will serve as a specular map quite well, but let's go ahead and add some extra details to create an effect similar to that in the above video.

There's a massive variety of methods we could employ here, but heres a quicky.

Using the specular map we have just finished, create a new layer. Then we need to take our Paint Bucket tool, set it to all layers, tolerance 8 and just click over different areas of the texture. Let's not go too go nuts, just a few places should do the trick.

---

Now we have a sort of chipped or worn paint effect. We need to Duplicate the base layer and move it to the top of our layers, then group it to the layer below which we just created (either click alt and click between the layers, or control-G). Change this top layer to overlay and we have a texture which only effects the painted area. Now select the middle or ‘painted layer', and double left click to access the blending options. Go to inner glow and set it to colour white, opacity 60%, noise 40%, and we'll get this unholy mess.

---

To give things a less abrupt look, all we need to do now is select the middle/paint layer, and alter its opacity to something a bit lower, so the new detail merges in nicely with the rest of the image. We can also use the dodge tool on this layer just to add some final touches.

Then just flatten the image down, and we're looking good!

---

Saving our Specular Map

Once again, logic and organisation! Keep the suffix, this time going with _s for specular and save it in the same folder as the Diffuse and Normal Maps. Our collection of texture files should now be:

Specular - Textures > Walls > Concrete > crete01_s.tga

Normal - Textures > Walls > Concrete > crete01_local.tga

Diffuse - Textures > Walls > Concrete > crete01_d.tga

---

Important Things to Consider

As mentioned earlier in this section a really major thing you should consider is how your Specular Map will interact with the Diffuse Map. This is something which will come with experience, but take a look at objects and materials in the real world and just see how purely 'shiny' areas effect their overall appearance.

Another thing is that as is the case with Normal Maps, Specular Maps are read differently by different engines. I always like to keep a layered .PSD version of all my textures should I need to make changes which can't be done effectively via the flattened texture.

Practice, try different things, be adaptable and you shouldn't have too many problems.

---

Conclusion

Tutorial Recap

Okay so I think we've covered quite a bit of ground here. As I've said throughout the Tutorial alot of it has been somewhat rushed because I just want to give you a general idea on how I approach this stuff. When it comes to adding detail and optimising your workflow there really is no definitive lesson. If you want your work to be of a high quality but also bring with it a signature style unique to YOU, these are things that you have to learn and develop on your own.

But we've gone through all the basic's when it comes to creating the textures for a material shader. There is alot more to it than this if you really want to go nuts, such as adding Glow/emissive maps, incorporating global illumination into your diffuse textures, offsetting overlayed alpha textures to break up repetition or even the aformentioned use of Height or Displacment maps.

Start small though. Pretty much all gaming engines (atleast from a FPS perspective) will support these texture maps, and they really form the vital foundations to any material shader.

Thanks for your time, I really hope this is of use to you and please email any thoughts/critique to me so I can make improvments where necassary : k1chi@hotmail.co.uk

---

See also

• Basic Material Shaders for Id Tech 4 (Doom 3)
  • I cover the required steps to get a fully functional, but basic Material Shader working in the Id Tech 4 engine by using Doom 3 as a base game. Uses textures developed in this Tutorial.


• Basic Material Shaders for UE3 (Gears of War) - coming soon
  • I cover the required steps to get a fully functional, but basic Material Shader working in the Unreal Engine 3 by using Gears of War as a base game. Uses textures developed in this Tutorial.

---

Resources

• www.cgtextures.com
  • Brilliant Texture Resource


• Nvidia Normal Map Plugin for Photoshop
  • Builds Normal Maps from Images